/***********************************宽度********************************/
$width_height: (
    0: 0px,
    1px: 1px,
    //'0.5': 0.125rem,
    1: 0.25rem,
    //'1.5': 0.375rem,
    2: 0.5rem,
    //'2.5': 0.625rem,
    3: 0.75rem,
    //'3.5': 0.875rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    7: 1.75rem,
    8: 2rem,
    9: 2.25rem,
    10: 2.5rem,
    11: 2.75rem,
    12: 3rem,
    14: 3.5rem,
    16: 4rem,
    20: 5rem,
    24: 6rem,
    28: 7rem,
    32: 8rem,
    36: 9rem,
    40: 10rem,
    44: 11rem,
    48: 12rem,
    52: 13rem,
    56: 14rem,
    60: 15rem,
    64: 16rem,
    72: 18rem,
    80: 20rem,
    96: 24rem,
    'auto': auto,
    'px': 1px,
    "1-2": 50%,
    "1-3": 33.333333%,
    "2-3": 66.666667%,
    "1-4": 25%,
    "2-4": 50%,
    "3-4": 75%,
    "1-5": 20%,
    "2-5": 40%,
    "3-5": 60%,
    "4-5": 80%,
    "1-6": 16.666667%,
    "2-6": 33.333333%,
    "3-6": 50%,
    "4-6": 66.666667%,
    "5-6": 83.333333%,
    "1-12": 8.333333%,
    "2-12": 16.666667%,
    "3-12": 25%,
    "4-12": 33.333333%,
    "5-12": 41.666667%,
    "6-12": 50%,
    "7-12": 58.333333%,
    "8-12": 66.666667%,
    "9-12": 75%,
    "10-12": 83.333333%,
    "11-12": 91.666667%,
    "full": 100%,
    "screen": 100vw,
    "min": min-content,
    "max": max-content,
);
@each $key, $value in $width_height {
    .w-#{$key} {
        width: $value;
    }
    .h-#{$key} {
        height: $value;
    }
}

$media:(
    'sm':640px,
    'md':744px,
    'lg':1024px,
    'xl':1128px,
);
/*
sm-w-10{
    @media (min-width:640px}) {
        width: 2.5rem
    }
}
*/
@each $width_height_key,$width_height_value in $width_height {
    @each $key,$value in $media {
        .#{$key}-w-#{width_height_key}{
            @media (min-width:#{$value}) {
                width: $width_height_value;
            };
        }
        .#{$key}-h-#{width_height_key}{
            @media (min-height:#{$value}) {
                height: $width_height_value;
            }
        }
    }
}


/*********************************最小宽度和高度******************************/
$min: (
    0: 0px,
    full: 100%,
    min: min-content,
    max: max-content,
    48:48px
);

@each $key, $value in $min {
    .min-w-#{$key} {
        min-width: #{$value};
    }
    .min-h-#{$key} {
        min-height: #{$value};
    }
}

/*********************************最大宽度和高度******************************/
$max: (
    0: 0px,
    full: 100%,
    min: min-content,
    max: max-content,
);

@each $key, $value in $max {
    .max-w-#{$key} {
        max-width: #{value};
    }
    .max-h-#{$key} {
        max-height: #{value};
    }
}
